<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div>
        <el-input v-model="inputX" placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
      </div>
      <orderList v-if="tableData" :table-data="tableData" :form-order="formOrder" :total="total" />
      <div class="block">
        <el-pagination
          :current-page="formOrder.pagenum"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="formOrder.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import orderList from '../components/orderList.vue'
import { getLeftOrders } from '@/api/orderRun.js'
export default {
  components: {
    orderList
  },
  data() {
    return {
      inputX: '',
      // 表格数据
      tableData: [],
      // 订单数据形式
      query: 'query',
      // 订单对象
      formOrder: {
        // 当前页
        pagenum: 1,
        // 每页面条目个数
        pagesize: 2
      },
      // 总条数
      total: 0
    }
  },

  created() {
    this.leftOrders()
  },

  methods: {
    // 获取表格数据
    async leftOrders() {
      const res = await getLeftOrders(this.formOrder)
      this.tableData = res.goods
      this.total = res.total
      console.log(res)
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formOrder.pagesize = val
      this.leftOrders()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formOrder.pagenum = val
      this.leftOrders()
    }
  }
}
</script>

<style scoped lang='scss'>
.input-with-select {
    width: 30%;
    margin-bottom: 16px;
    margin-right: 20px;
  }
</style>
